<template>
  <view class="page">
	  <!-- #ifdef MP-WEIXIN-->
	  	<view class="head"><text @click="clear">清空</text></view>
	  <!-- #endif -->
	  <!-- #ifndef MP-WEIXIN-->
		<my-navbar leftText="收藏" @leftClick="back" @rightClick="clear" rightText="清空" rightColor="#0eaa78"></my-navbar>
	  <!-- #endif -->
		<view class="content">
			<view v-for="(item,index) in list " :key="item.id" :class="item.status==0 || item.is_del==1 ? 'sign_good my_listcol disable':'sign_good my_listcol'">
				<view class="list">
					<view class="flex info " @click="detailPage(index,item.goods_id)">
						<!-- 收藏的星星 -->
						<view class="star flex-middle" @click.stop="collectAction(item.goods_id)">
							<text class="custom-icon custom-icon-xingxing"></text>
						</view>
						<view class="imgs">
							<image class="photo" :src="item.img" mode="aspectFit"></image>
							<!-- <image class="logo" v-if="showLogo==1" :src="logo" mode="aspectFit"></image> -->
						</view>
						<view class="desc">
							<view class="price_top">
								<text class="red_font ten" v-show="canshowprice">{{item.showPrice}} <text v-if="item.spu.length==1&& item.spu[0].current_price==0" style="font-size:20rpx;"> /{{item.spu[0].unit}}</text></text>
								<text v-show="!canshowprice"></text>
								<!-- 商品下架或删除 -->
								<view v-if="item.status!=0 && item.is_del!=1">
									<view class="tag_box" v-if="item.spu.length>1">
										<image @click.stop="showCart(index)" class="addcartIcon" src="../../static/image/addcart.png" mode=""></image>
										<text v-if="item.willBuyNum>0" class="tag">{{item.willBuyNum}}</text>
									</view>
									<my-stepper v-else :val="item.willBuyNum" :min="item.minimum" :limit="item.designated_inventory" :inventory="item.inventory_left" :index="index" @plus="addAction"
										@minus="subAction" @showKey="$refs.keyboard.open(item.is_standard,index,item.minimum,item.inventory_left,item.designated_inventory)"></my-stepper>
								</view>
							</view>
							<view class="list_name flex-middle">
								<text class="name">{{item.name}}</text>
								<text class="des gray_font">{{item.describe||''}}</text>									
							</view>
							<view class="tag flex-btw">
								<view>
									<text v-for="(i,index) in item.datum" :key="index" class="red_tag">{{i.title}}</text>
								</view>
								<view v-if="item.status==0" class="cantadd">已下架</view>
								<view v-else-if="item.is_del==1" class="cantadd">已删除</view>
							</view>
							<!-- <view class="inventory">
								<text v-if="item.minimum>0">起订量：{{item.minimum}}</text>
								<text v-if="item.designated_inventory>0">库存：{{item.inventory_left}}</text>
							</view> -->
						</view>
					</view>
				</view>
			</view>
			<view class="nodata" v-if="list.length==0">
				<image :src="nodataImg" mode="aspectFit"></image>
				<view>空空如也~</view>
			</view>
		</view>
	  	<my-keyboard ref="keyboard" @confirm="inputPrice"></my-keyboard>
		<my-addcart ref="minicart" :canshowprice="true"></my-addcart>
  </view>
</template>

<script>
import {$https} from '@/static/js/request.js';
import MixinShowprice from '@/static/js/mixinshowprice.js'
export default {
    data(){
        return{
			nodataImg:getApp().globalData.nodataImg,
			logo:'',
			showLogo:0,
			count:0,
			list:[],
			page: 1,
        }
	},
	onLoad(){
		this.getData(1);
		this.logo = uni.getStorageSync('logo');
		this.showLogo = uni.getStorageSync('showLogo');
	},
	mixins:[MixinShowprice],
	
	
	onReachBottom() {
		if (this.list.length < this.count) {
			this.page++;
			this.getData(this.page);
		}
	},
    methods:{
		getData(page){
			var params = {
				page: page,
				size: 10
			}
			$https('GET', 'getCollection', params, res => {
				this.count = res.data.data.count;
				var data = this.changePrice(res.data.data.list)
				this.list = this.list.concat(data);
			})
		},
		//处理价格规格sku
		changePrice(data) {
			// debugger;
			var array = JSON.parse(JSON.stringify(data));
			for (let i in array) {
				//算出价格范围
				if (array[i].spu.length > 1) {
					var min, max;
					min = array[i].spu[0].market_price;
					if (array[i].spu[1].market_price < min) {
						max = Number(array[i].spu[0].market_price);
						min = Number(array[i].spu[1].market_price);
					} else {
						max = Number(array[i].spu[1].market_price);
						min = Number(array[i].spu[0].market_price);
					}
					for (let y in array[i].spu) {
						if (Number(array[i].spu[y].market_price) < min) {
							min = Number(array[i].spu[y].market_price)
						} else if (Number(array[i].spu[y].market_price) > max) {
							max = Number(array[i].spu[y].market_price);
						}
					}
					array[i].showPrice = `￥${min.toFixed(2)}~${max.toFixed(2)}`;
				} else if(array[i].spu.length == 1){
					//是时价
					if(array[i].spu[0].current_price==1){
						array[i].showPrice = '时价';
					}else{
						array[i].showPrice = '¥'+array[i].spu[0].market_price;
					}
					//只有一个规格时显示起订量、库存
					array[i].minimum = array[i].spu[0].minimum;
					array[i].designated_inventory  = array[i].spu[0].designated_inventory
					array[i].inventory_left = array[i].spu[0].inventory_left;
				}else{
					
					break;
				}
				array[i].willBuyNum = array[i].num_cart_count;
			}
			return array;
		},
		clear(){
			uni.showModal({
				content:'是否清空收藏',
				confirmColor:'#4FA388',
				success:(res)=>{
					if (res.confirm) {
						$https('GET','delCollect',{},result=>{
							if(result.data.errcode==0){
								this.list = [];
								this.getData(1);
							}
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})
		},
        back(){
            // #ifdef H5
            	window.history.back(-1);
            // #endif 
            // #ifndef H5
            uni.navigateBack();
            // #endif
		},
		//＋
		addAction(data) {
			var index = data.index,
				min = data.min,
				limit = data.limit,
				inventory = data.inventory,
				val = data.value;
			if (val < min) {
				val = min;
			} else if (limit>0 && val + 1 >= inventory) {
				//不能超过库存量
				val = inventory;
				uni.showToast({
						icon:'none',
						title:'库存不足'
					})
			} else {
				val++;
			}
			// this.list[index].willBuyNum = val;
			this.addToCart(this.list[index].id,this.list[index].spu[0].id,val.toFixed(2),index)
		},
		//-
		subAction(data) {
			var index = data.index,
				min = data.min,
				inventory = data.inventory,
				val = data.value;

			if (val - 1 < min) {
				val = 0;
			} else {
				val--;
			}
			// this.list[data.index].willBuyNum = val;
			this.addToCart(this.list[index].id,this.list[index].spu[0].id,val.toFixed(2),index)
		},
		//输入数量
		inputPrice(data) {
			var value = Number(data.value),
			index = data.index;
			// this.list[index].willBuyNum = value;
			this.addToCart(this.list[index].id,this.list[index].spu[0].id,value.toFixed(2),index)
		},
		addToCart(goodsId,spuId,num,index){
			var options ={
				goods_id:goodsId,
				spu_id:spuId,
				num,
			} 
			$https('POSTN','changeCart',options,res=>{
				if(res.data.errcode==0){
					this.list[index].willBuyNum = Number(num);
				}else{
					uni.showToast({
						title:res.data.errmsg,
						icon:'none'
					})
				}
			})
		},
		detailPage(index, id) {
			if(this.list[index].status!=0 && this.list[index].is_del!=1){
				var data = JSON.stringify(this.list[index]);
				uni.navigateTo({
					url: `../../pages/index/shopdetail?id=${id}&data=${data}&index=${index}`,
				})				
			}
		},
		
		//加入收藏
		collectAction(id){
			uni.showModal({
				content:'是否取消收藏',
				confirmColor:'#4FA388',
				success:(res)=>{
					if (res.confirm) {
						$https('GETN','collection',{status:0,goods_id:id},res=>{
							if(res.data.errcode == 0){
								this.getData(1)
							}else{
								uni.showToast({
									title:res.data.errmsg,
									icon:'none'
								})
							}
						})
					}
				}
			})
		},
		//显示小购物车
		showCart(index) {
			var data = this.list[index];
			this.$refs.minicart.open(data)
		},
    }
}
</script>

<style lang="scss" scoped>
/deep/.u-drawer {
	overflow: unset!important;
}
.page{
	.head{
		height: 88rpx;
		width: 100%;
		padding:0 30rpx;
		color:#4FA388;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
    .content {
		flex: 1;
		overflow: auto;
		margin-top:10rpx;
		.tonext{
			height:150rpx;
		}
		// .all_good_height {
		// 	// height: calc(100vh - 50px - 130rpx);
		// }

		.my_listcol {
			box-sizing: border-box;

			.list {
				min-height: 180rpx;
				flex: 1;
				padding: 20rpx 0;
				margin: 0 30rpx;
				border-bottom: 1px solid #E7E8E8;
				display: flex;
				.imgs{
					position: relative;
					.logo{
						width:40rpx;
						height:40rpx;
						position: absolute;
						top: 0;
						left:0;
						z-index: 1;
					}
				}
				.info {
					flex-grow: 1;
					align-items: center;
					.star{
						height: 100%;
						 color:orange;
						 padding-right:20rpx;
					}
					.photo {
						width: 120rpx;
						height: 120rpx;
						margin-right: 16rpx;
					}
				}

				.desc {
					height: 100%;
					flex: 1;
					position: relative;
					// font-size: 20rpx;
					>view+view {
						margin-top: 4rpx;
					}
					
					.price_top {
						display: flex;
						justify-content: space-between;
						align-items: center;
						.tag {
							position: absolute;
							right: -20rpx;
							top:-8rpx;
							margin-top: -5px;
							background: red;
							padding:0 8rpx;
							height: 15px;
							line-height: 15px;
							border-radius: 15rpx;
							text-align: center;
							color:$white;
							font-size: 5px;
						}
						.addcartIcon {
							width: 60rpx;
							height: 60rpx;
						}
					}
					.cantadd{
						background:#BCBCBD;
						color:#fff;
						padding:8rpx 10rpx;
						border-radius:4rpx;
						font-size: 20rpx;
						white-space: nowrap;
						margin-left: 10rpx;
					}

					.list_name {
						.name {
							font-size: 28rpx;
							color: #191919;
							font-weight: bold;
						}

						.des {
							flex: 1;
							// width: 150px;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
							// white-space: nowrap;
							// overflow: hidden;
							// text-overflow: ellipsis;
							flex: 1;
							font-size: 16rpx;
							color: #CCCCCC;
							margin-left: 12rpx;
						}
					}

					.red_tag {
						font-size: 12rpx;
						padding: 0 8rpx;
					}

					.inventory {
						color: #737373;
						font-size: 20rpx;

						>text+text {
							margin-left: 20rpx;
						}
					}
				}


				.custom-icon-gouwu {
					color: $dgreen;
					font-size: 10px;
				}

			}
		}
		.disable{
			background:#E2E2E3;
		}
	}
}
</style>